<template>
  <div class="store-firmware-update">
    <Row type='flex'
         justify="end"
         style="padding:20px">
      <Col @click.native="openDraw"><Button>历史记录</Button></Col>
    </Row>
    <Row>
      <Col>
      <Table stripe :height="this.tableHeight"
             :columns="columnsData"
             :data="list"
             :loading='loading'>
        <template slot-scope="{ row }"
                  slot="choose">
          <Row type='flex'
               justify="center"
               align='middle'>
            <Col style="width:8px;height:8px;background:#2D8CF0;border-radius:50%;margin-right:5px"
                 v-if='row.shopId'>
            </Col>
            <Col><span style="color: #2D8CF0">{{row.shopId ? '使用中版本': null}}</span></Col>
          </Row>
        </template>
        <template slot-scope="{ row }"
                  slot="action">
          <i class="iconsys iconsetting"
             title="设置"
             @click='set(row)'></i>
        </template>
      </Table>
      </Col>
    </Row>
    <Row type='flex'
         justify="end"
         class="page-bottom"
         style="margin-top:20px">
      <Col>
      <Page :total="total"
            :page-size="pageSize"
            show-sizer
            show-total
            @on-change='changePage'
            @on-page-size-change='changePageSize' />
      </Col>
    </Row>
    <Drawer title="历史记录"
            :closable="true"
            :transfer='false'
            v-model="historyShow"
            width="55%">
      <Table stripe :height="this.tableHeight"
             :columns="columnsData3"
             :data="list3">
        <template slot-scope="{ row }"
                  slot="type">
          <span>{{row.materialType === 0 ? '固件包': '待机动画'}}</span>
        </template>
        <template slot-scope="{ row }"
                  slot="itemName">
          <span>{{row.materialName.split('_')[0]}}</span>
        </template>
        <template slot-scope="{ row }"
                  slot="version">
          <span>{{row.materialName.split('_')[1].split('.')[0]}}</span>
        </template>
      </Table>
      <div class="demo-drawer-footer">
        <Row type='flex'
             justify="end"
             class="page-bottom" style='padding:20px'>
          <Col>
          <Page :total="historyTotal"
                :page-size='historyPageSize'
                show-sizer
                show-total
                @on-change='changePageHistory'
                @on-page-size-change='changePageSizeHistory' />
          </Col>
        </Row>
      </div>
    </Drawer>
    <Modal v-model="modalStatus"
           title="设为使用"
           @on-ok="saveMaterial"
           @on-cancel="cancel"
           width='480'>
      <p>确定要将物料{{name}}设为当前使用中的固件吗？</p>
    </Modal>
  </div>
</template>

<script>
import { getMaterialList, getHistoryList, saveMaterialInfos } from '@/api/setting'
import { routeEqual } from '@/libs/util'
export default {
  data () {
    return {
      tableHeight: 0,
      loading: true,
      name: '',
      shopIdList: [],
      materialId: '',
      isSetting: true, // 是否设置
      total: 0,
      pageSize: 10,
      pageIndex: 1,
      historyTotal: 0,
      historyPageSize: 10,
      historyPageIndex: 1,
      historyShow: false,
      modalStatus: false,
      columnsData: [
        {
          title: ' ',
          slot: 'choose',
          align: 'center',
          width: '150'
        },
        {
          title: '物料名称',
          key: 'materialName'
        },
        {
          title: '上传时间',
          key: 'createTime',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      columnsData3: [
        {
          title: '发布时间',
          key: 'createTime',
          align: 'center'
        },
        {
          title: '物料名称',
          key: 'materialName',
          align: 'center'
        },
        {
          title: '固件类型',
          slot: 'type',
          align: 'center'
        },
        {
          title: '项目名称',
          slot: 'itemName',
          align: 'center'
        },
        {
          title: '固件版本号',
          slot: 'version',
          align: 'center'
        }
      ],
      list3: [],
      list: []
    }
  },
  methods: {
    closeModal () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'store_setting'
        })
      })
    },
    changePage (index) {
      this.pageIndex = index
      this.getMaterialInfo()
    },
    changePageSize (size) {
      this.pageSize = size
      this.getMaterialInfo()
    },
    changePageHistory (index) {
      this.historyPageIndex = index
      this.getHistoryInfo()
    },
    changePageSizeHistory (size) {
      this.historyPageSize = size
      this.getHistoryInfo()
    },
    set (row) {
      this.name = row.materialName
      this.materialId = row.materialId
      this.modalStatus = true
    },
    saveMaterial () {
      if (this.isSetting) {
        if (!this.isSetting) {
          return
        }
        this.isSetting = false
        setTimeout(() => {
          saveMaterialInfos({
            'merchantId': this.$store.state.user.merchantId,
            'materialType': 0,
            'materialId': this.materialId,
            'shopIdList': this.shopIdList,
            'batchFlag': 1
          }).then(res => {
            this.isSetting = true
            if (res.data.status === 200) {
              this.$Message.success('设置成功！')
              this.getMaterialInfo()
              this.closeModal()
            } else {
              this.$Message.error(`${res.data.message}`)
            }
          })
        }, 200)
      }
    },
    cancel () { },
    // 获取固件列表
    getMaterialInfo () {
      this.loading = true
      this.tableHeight = 0
      getMaterialList({
        'merchantId': this.$store.state.user.merchantId,
        'materialType': 0,
        'limit': this.pageSize,
        'offset': this.pageSize * (this.pageIndex - 1),
        'shopId': this.$route.query.id
      }).then(res => {
        if (res.data.status === 200) {
          this.loading = false
          this.list = res.data.data
          this.total = res.data.totalCount
          if (res.data.data && res.data.data.length >= 10) {
            this.tableHeight = 520
          }
        } else {
          this.loading = false
          this.$Message.error(`${res.data.message}`)
        }
      }).catch(err => {
        this.loading = false
        this.$Message.error(`${err}`)
      })
    },
    openDraw () {
      this.historyShow = true
      this.getHistoryInfo()
    },
    // 查看历史记录
    getHistoryInfo () {
      getHistoryList({ shopId: this.$route.query.id, materialType: 0, 'limit': String(this.historyPageSize), 'offset': String(this.historyPageSize * (this.historyPageIndex - 1)) }).then(res => {
        if (res.data.status === 200) {
          this.list3 = res.data.data
          this.historyTotal = res.data.totalCount
          if (res.data.data && res.data.data.length >= 10) {
            this.tableHeight = 520
          }
        } else {
          this.$Message.error(`${res.data.message}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    }
  },
  mounted () {
    this.getMaterialInfo()
    this.shopIdList.push(this.$route.query.id)
    if (!this.hasPermission('moms:setting:firmware')) {
      this.$router.replace({ name: 'error_401' })
    }
  }
}
</script>

<style lang='less'>
.store-firmware-update {
  .ivu-drawer-body {
    padding: 0;
  }
  .ivu-drawer-header {
    border-bottom: 0;
  }
}
</style>
